<template>
	<!--  circle checkbox-filled -->
	<view class="c-checkbox" @click="handleChange">
		<uni-icons
			:type="status ? 'checkbox-filled' : 'circle'"
			:color="status ? activeColor : inactiveColor"
			:size="size"
		></uni-icons>
		<slot>
			<text class="checkbox-label">{{ label }}</text>
		</slot>
	</view>
</template>

<script setup>
	import { inject, ref, watchEffect, getCurrentInstance } from 'vue';
	import _props from './props.js';

	const props = defineProps(_props);
	const emits = defineEmits(['change', 'update:modelValue']);
	const instance = getCurrentInstance().proxy;
	const parentFunc = inject('parent');

	const status = ref(false);

	watchEffect(() => {
		status.value = props.modelValue || props.checked;
	});

	function handleChange() {
		status.value = !status.value;
		emits('change', status.value);
		parentFunc && parentFunc({status, instance})
		emits('update:modelValue', status.value);
	}
</script>

<style lang="scss">
	.c-checkbox {
		display: inline-flex;
		align-items: center;
	}
</style>
